Skip to content

Add Button Controlled LEDs tutorial under ESPHome Starter Kit > Automations#852

Merged
bharvey88 merged 1 commit into
devfrom
docs-button-controlled-leds-tutorial
May 22, 2026
Merged

Add Button Controlled LEDs tutorial under ESPHome Starter Kit > Automations#852
bharvey88 merged 1 commit into
devfrom
docs-button-controlled-leds-tutorial

Conversation

@bharvey88
Copy link
Copy Markdown
Contributor

@bharvey88 bharvey88 commented May 22, 2026

What does this implement/fix?

Adds a new Automations group under ESPHome Starter Kit in the sidebar, with a first tutorial: Button Controlled LEDs. The page walks readers through building an automation in the new ESPHome Device Builder GUI (no YAML by hand) so pressing the Button module toggles the RGB module.

The tutorial covers:

  • Opening the editor and starting a new automation
  • Setting up the trigger (Binary Sensor → On Click on the Button module) with a collapsible callout for the other button-gesture options
  • Setting up the action (Light → Toggle on RGB LEDs) with an inline annotation explaining when the ID dropdown needs changing
  • A collapsible YAML view of what the GUI built
  • Save → Install → On the Network, plus a test step (press the button, hear the click, watch the LEDs toggle)

Effects are deliberately not covered yet because the GUI builder doesn't expose effect selection today.

mkdocs.yml changes:

  • New Automations: group under ESPHome Starter Kit with the tutorial wired up
  • Adds md_in_html to markdown_extensions so the <div class="annotate" markdown> annotation pattern works for inline notes inside list items (the pattern recommended by the Material annotation docs for nested content)

Screenshot placeholder for the hero image (esphome-starter-kit-button-rgb-assembled.png) is left as a <!-- TODO --> comment in the page. Will drop the image in a follow-up.

Types of changes

  • Typo / wording fix
  • Content update (correcting outdated info, adding missing steps, clarifications)
  • New page or new product section
  • Page move / rename (redirect added in mkdocs.yml)
  • Image / screenshot update
  • Nav / structure change
  • Site config or theme change
  • CI / workflows / dependencies — Does not publish

Checklist:

  • This PR targets the dev branch (not main)
  • Changes previewed locally with mkdocs serve
  • If pages were moved or renamed, redirects were added to mkdocs.yml
  • If new pages were added, nav was updated in mkdocs.yml

Summary by CodeRabbit

Release Notes

  • Documentation
    • Added a new guide for creating button-controlled LED automations in ESPHome Device Builder, including step-by-step setup instructions, configuration examples, and testing steps.

Review Change Stack

…ations

Introduces a new Automations group with a first GUI-builder tutorial that walks
through wiring the Button module to toggle the RGB module via on_click. Adds
md_in_html to mkdocs.yml to support inline annotations inside list sub-items.
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 22, 2026

Caution

Review failed

Pull request was closed or merged during review

Walkthrough

This PR introduces a new tutorial page documenting how to build a button-controlled LED automation using ESPHome Device Builder. The tutorial walks users through triggering on button clicks and toggling RGB LEDs, includes embedded YAML configuration, installation steps, and testing verification. The site navigation and markdown extension are updated to support the new page.

Changes

Button Automation Documentation

Layer / File(s) Summary
Button-Controlled LEDs Tutorial Page
docs/products/ESPHome-Starter-Kit/automations/button-controlled-leds.md
New tutorial explaining how to configure a GUI automation in ESPHome Device Builder that toggles RGB LEDs when the Button module is pressed. Includes step-by-step setup instructions, an embedded "GUI built in YAML" note showing the binary_sensor on_click trigger wired to light.toggle, firmware installation over Wi‑Fi, and testing verification.
Site Navigation and Markdown Extension Configuration
mkdocs.yml
Enabled the md_in_html markdown extension and added a new Automations subsection under ESPHome Starter Kit in the site navigation, with Button Controlled LEDs as the first listed page.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

  • ApolloAutomation/docs#804: Adds the Button Module documentation page and corresponding navigation entry; this PR builds on that by documenting an automation pattern using the Button module.
  • ApolloAutomation/docs#778: Modifies mkdocs.yml to restructure ESPHome Starter Kit navigation; this PR adds a new Automations section to that same navigation area.

Poem

🐰 A button pressed, the LEDs glow bright,
Automation flows—a tutorial delight!
From Device Builder's canvas so fair,
Trigger and action dance through the air. ✨

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately and concisely describes the main change: adding a tutorial page about button-controlled LEDs in the ESPHome Starter Kit documentation under a new Automations section.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch docs-button-controlled-leds-tutorial

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@bharvey88 bharvey88 merged commit d49bbd5 into dev May 22, 2026
1 check was pending
@bharvey88 bharvey88 deleted the docs-button-controlled-leds-tutorial branch May 22, 2026 00:22
@bharvey88 bharvey88 mentioned this pull request May 22, 2026
12 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant